<template>
    <div class="messageAudio">
        <div class="yinp"  v-if="info.isplay" @click="pauseLy(info)">
            <img src='/static/images/pause.png'/>
         </div>
         <div class="yinp" @click="playLy(info)"   v-else>
            <img src='/static/images/play.png'/>
         </div>
        <div class="audioTime">{{time}}</div>
    </div>
</template>

<script>

export default {
     props:["audio","time","id","playIndex","status","info"],
     data(){
        return {
           videoStatus:false
        }
     },
     methods:{
        playLy(info){
            let data={};
            data.audio=this.audio;
            data.id=info.id;
            info.isplay=!info.isplay;
            this.$emit("playLy",data)
        },
        pauseLy(info){
           let data={};
            data.audio=this.audio;
            data.id=info.id;
            info.isplay=!info.isplay;
            this.$emit("pauseLy",data)
        }
     },
     onUnload(){
        
     }
}
</script>

<style lang="scss">
.messageAudio{
   display: flex;
   .yinp{
      width:128px;
      height:25px;
      background:rgba(214,231,254,1);
      border:1px solid rgba(26,132,251,1);
      border-radius:5px;
      padding:2rpx 5rpx;
      box-sizing:border-box;
      img{
         width:20px;
         display:block;
         height:20px;
      }
   }
   .audioTime{
      font-size:12px;
      font-weight:500;
      color:rgba(70,183,255,1);
      line-height:1;
      padding-left:5px;
   }
}
</style>
